webpack环境的搭建以及简单实用

1安装node.js 
  在cmd 模式下 进行查看node版本  node -v
  查看npm 版本   npm -v
2 切换国内
  npm install nrm -g   全局安装
3. 查看nrm 列表 ,默认为npm
   nrm ls
4切换使用的网址
   nrm use taobao
 5 安装 webpack
  npm install webpack -g
  
6 在项目中配置默认的webpack.config.js文件

module.exports={
  entry:'./src/main.js',  //指定打包的入口文件
  output:{
  	path : __dirname+'/dist',  // 注意：webpack1.14.0 要求这个路径是一个绝对路径
  	filename:'build.js'
  }
}

7  在项目下进行npm init 然后 cssloader  会生成package.json文件
--save-dev 表示 保存到json文件中


8下载css-loader和style-loader来处理css资源的打包工作, npm i css-loader style-loader  --save-dev
webpack.config.js文件中进行配置
打包css 文件时,在main.js文件中使用  require('../static/css/css.js') 进行加载文件

module.exports={
  entry:'./src/main.js',  //指定打包的入口文件
  output:{
  	path : __dirname+'/dist',  // 注意：webpack1.14.0 要求这个路径是一个绝对路径
  	filename:'build.js'
  },
  module:{
  	loader:[
  		{
  			test: /\.css$/,
  			loader:'style-loader!css-loader'
  		}
  	]
  }
}

9 下载 node-sass 会报错时(由于使用国外资源时间过长) 需要安装cnpm
安装方法 npm install cnpm -g


10 打包.sass等.css文件, cnpm install node-sass  sass-loader  css-loader style-loader --save-dev

module.exports={
  entry:'./src/main.js',  //指定打包的入口文件
  output:{
  	path : __dirname+'/dist',  // 注意：webpack1.14.0 要求这个路径是一个绝对路径
  	filename:'build.js'
  },
  module:{
  	loader:[
  		{
  			test: /\.css$/,
  			loader:'style-loader!css-loader'
  		},
		{
  			test: /\.sass$/,
  			loader:'style-loader!css-loader!sass-loader'
  		}
  	]
	
  }
}

11打包less资源 npm install less less-loader css-loader style-loader --save-dev






12 打包url()请求资源
npm install url-loader file-loader --save-dev

其中的loader

loader:[
  		{
  			test: /\.(png|jpg|gif|ttf)$/,
  			loader:'url-loader?limit=40000'  //限制图片的大小 如果小于40k当做base64字节,如果大于40k当做文件保存到磁盘里面
  		}
  	]