β

webpack+ES6+less开发环境搭建(附带视频教程) – CNode技术社区

Richen's 幻想世界 453 阅读

webpack+ES6+less开发环境搭建(附带视频教程)


发布于 8 天前


作者 1340641314


642 次浏览


最后一次编辑是 7 天前

• 来自 分享

webpack是什么

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

百度网盘视频下载: http://pan.baidu.com/s/1jIPJucu
百度网盘在线观看: http://pan.baidu.com/share/link?shareid=1645979812&uk=2469628767&fid=988128759555711

基本命令

	  webpack         // 最基本的启动webpack的方法
	  webpack -w      // 提供watch方法;实时进行打包更新
	  webpack -p      // 对打包后的文件进行压缩
	  webpack -d      // 提供source map,方便调式代码

全局安装

	  # npm webpack -g
	  项目安装:
	  # 进入项目目录
	  # 确定已经有 package.json,没有就通过 npm init 创建
	  # 安装 webpack 依赖
	  # npm install webpack --save-dev

使用ES6

	安装 babel-loader: 
	# npm install babel-loader --save-dev
	安装转码规则:       
	# npm install babel-preset-es2015 --save-dev
	参考格式:
	{
		test: /.js$/,
		loader: 'babel?presets=es2015'
	}

编译css

	安装css-loader:  
	# npm install css-loader  --save-dev
	安装style-loader  
	# npm install style-loader  --save-dev
	参考格式:
	{
		test: /.css$/,
		loaders: ['style', 'css', 'autoprefixer']
	}

编译less

	# npm install less --save-dev
	安装less-loader: 
	# npm install less-loader --save-dev
	参考格式:
	{
		test: /.less/,
		loaders: ['style', 'css', 'autoprefixer', 'less'],
	}

使用autoprefixer自动补上浏览器兼容

	# npm install autoprefixer-loader --save-dev
	参考格式:
	{
		test: /.css$/,
		loaders: ['style', 'css', 'autoprefixer']
	}, {
		test: /.less/,
		loaders: ['style', 'css', 'autoprefixer', 'less'],
	}

编译文件

	安装file-loader: 
	# npm install file-loader --save-dev
	参考格式:
	{
		test: /.(eot|woff|svg|ttf|woff2|gif)(?|$)/,
		loader: 'file-loader?name=[hash].[ext]'
	}

编译图片

	# npm install url-loader --save-dev
	参考格式:
	{
		test: /.(png|jpg)$/,
		loader: 'url?limit=1200&name=[hash].[ext]'
	}

示例源码

在项目目录下,新建一个webpack.config.js文件,把下面代码复制进去,然后在新建一个app.js和index.js文件,写上console.log('你好世界');
执行命令:webpack 然后找到build目录就看到编译后的文件了
  var webpack = require('webpack');
  module.exports = {
	  entry: {
		  app: './app', //编译的入口文件
		  index: './index', //编译的入口文件
	  },
	  output: {
		  publicPath: '/build/', //服务器根路径
		  path: './build', //编译到当前目录
		  filename: '[name].js' //编译后的文件名字
	  },
	  module: {
		  loaders: [{
				  test: /.js$/,
				  loader: 'babel?presets=es2015'
			  }, {
				  test: /.css$/,
				  loaders: ['style', 'css', 'autoprefixer']
			  }, {
				  test: /.less/,
				  loaders: ['style', 'css', 'autoprefixer', 'less'],
			  }, {
				  test: /.(eot|woff|svg|ttf|woff2|gif)(?|$)/,
				  loader: 'file-loader?name=[hash].[ext]'
			  }, {
				  test: /.(png|jpg)$/,
				  loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片
			  }
		  ]
	  },
	  plugins: [
			  new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块,打包进common.js
	  ],
	  resolve: {
		  extensions: ['', '.js', '.jsx'] //后缀名自动补全
	  }
  };

21 回复


blackjack

1楼•8 天前




1

牛逼


1340641314

2楼•8 天前




@blackjack
多谢支持


wanghaa

3楼•8 天前




1

有源码吗?

来自酷炫的 CNodeMD


1340641314

4楼•8 天前




@wanghaa
最下面的示例源码就是


moxiaobei2

5楼•8 天前




弱弱地问下,要怎么用呢?


1340641314

6楼•8 天前




@moxiaobei2
在项目目录下,新建一个webpack.config.js文件,把示例代码复制进去,然后在新建一个app.js和index.js文件,写上console.log(‘你好世界’);
执行命令:webpack 然后找到build目录就看到编译后的文件了


moxiaobei2

7楼•8 天前




1

@1340641314 好的,我试试。期待中。。


1340641314

8楼•8 天前




@moxiaobei2
go


anotherWill

9楼•7 天前




请问我想在项目下的SRC目录下放js/html/css等源文件要怎么运行webpack命令?要怎么配置?


1340641314

10楼•7 天前




@anotherWill

  entry: {
  app: './app', //编译的入口文件
  index: './index', //编译的入口文件
  },
  output: {
  publicPath: '/build/', //服务器根路径
  path: './build', //编译到当前目录
  filename: '[name].js' //编译后的文件名字
  }
  你配置一个入口文件,然后引入你编译的模块,参考如下:
import './font/iconfont.css'; //字体图标
import './less/common.less'; //公共css样式
import './less/index.less'; //首页css样式
import './lib/swiper/swiper-3.3.1.min.css'; //移动端滑块插件css
import './lib/swiper/swiper-3.3.1.min'; //移动端滑块插件js


1340641314

11楼•7 天前




@anotherWill 晚上我看看有没有时间,不然我做一个demo出来吧


anotherWill

12楼•7 天前




@1340641314 如果我用entry: ‘.webpack’,这种方式配置入口的话要怎么搞?


1340641314

13楼•7 天前




@anotherWill 直接写你要编译的文件入口路径就行了


anotherWill

14楼•7 天前




@1340641314 我知道那样是可以。但是我只写一个标示。例如index.webpack.js/login.webpack.js只需要配置入口为’.webpack’就可以了。不用写那么多入口文件。但是我不知道在src目录下要怎么运行webpack命令。老是爆粗。


1340641314

15楼•7 天前




@anotherWill
你应该是在项目目录下运行吧,然后’./src/路径’;


anotherWill

16楼•7 天前




1

@1340641314 我试了不行。等我有空再搞搞。


1340641314

17楼•7 天前




@anotherWill
今天不用加班,晚上录制个视频,顺便做个demo出来


anotherWill

18楼•7 天前




@1340641314 厉害。


1340641314

19楼•7 天前




@anotherWill
现在可以了,就是英语很渣。凑合着先看看


anotherWill

20楼•6 天前




@1340641314 谢谢。


MirrorWang

21楼•1 小时前




mayrk
自豪地采用 CNodeJS ionic

作者:Richen's 幻想世界
在WEB前端和后端游走

发表评论