webpack的安装步鄹，对于小白易懂！

webpack

         
1、在命令行输入    cnpm i webpack -g

       index.html
        div#app

2、先创建好bundle.js     

           script.src="bundle.js"

 app.js 
alert("helloworld");

cmd  ---  转换app.js---入口文件    bundle.js---输出文件
webpack app.js bundle.js     // bundle.js的内容会自动填充

3、引入css 模块
必须转换器 style-loader  css-loader
require("style!css!./css/main.css")

如果需要更多的loader去解析文件，这样才做会很麻烦

webpack.config.js  配置文件

module.exports = {
entry:"./app.js",
output:{
path:__dirname,
filename:"bundle.js"
},
module:{
loaders:[ //新版的是rules
{test:/\.css$/,loader:"style!css"}
]
}

}

引入css模块
require("./css/main.css");

模块化开发
1、注册模块、定义模块

2、暴露模块

3、导入模块

4、使用模块

4、调试代码，通过source-map调试
cnpm i source-map
webpack --devtool source-map

在控制台内的source选项中可以出现一个webpack://，此时可以进行调试自己的代码（断点调试）

这种方式很麻烦，将此配置到webpack.config.js中，在此文件中添加一个选项
devtool:"source-map"

5、服务热替换

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server --save-dev

cmd
webpack-dev-server
package.json
scripts
dev:"webpack-dev-server"


cmd
cnpm run dev

6、如果css文件中包含背景图片，那么我们需要一个url-loader
cnpm i url-loader --save-dev

webpack.config.js中配置   limit不清楚写多少最好不要写
{test:/\.(jpg|png|gif)$/,loader:"url-loader?limit=1024"} 单位为B


如果在你的项目中添加了字体文件，那么我们需要添加一个file-loader
cnpm i file-loader --save-dev
添加配置文件
{test:/\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,loader:'file-loader?name=[name].[ext]'}

scss 模块
cnpm i sass-loader --save-dev
如果提示node-sass模块没有安装  cnpm i node-sass --save-dev

require("./scss/my.scss")

配置文件   --   从右往左执行
{
test:/\.scss$/,
loader:"style-loader!css-loader!sass-loader"
},


7、less 模块
cnpm i less-loader --save-dev
如果提示less块没有安装  cnpm i less --save-dev
require("./less/my.less")

配置文件   --   从右往左执行
{
test:/\.less/,
loader:"style-loader!css-loader!less-loader"
},


8、如果项目中要使用es6构建
在webpack.config.js的同级目录下创建一个文件  ---- 预设文件
.babelrc
{
presets:["es2015"]
}

安装依赖的模块
cnpm i babel-preset-es2015 --save-dev
cnpm i babel --save-dev
cnpm i babel-core --save-dev
cnpm i babel-loader --save-dev

修改配置文件
{test:/\.js$/,loader:"babel-loader"}


cnpm run dev


md/test.js
//暴露代码
export default {
add(){
return "helloworld11111111111111"
}
}
//引入
import "./css/main.css"
import test from "./md/test.js"