Simple configuration of webpack

webpack also depends on nodejs and npm;

install node, npm;

//Install webpack globally

npm install webpack -g

//installed in the project's dependencies

 package.json village

 npm install webpack --save-dev

webpack configuration items

module.export={

entry:""//Files imported by the entry file

output:{

path: "path", _dirname

 filename:""//The output file name

},

module:{

loader:[//The loader is ready for the compilation of some files

  {

        test:/\.css/,

        use:[

                {loader:"style-loader"}

                {loader:"css-loader"}

            ]

        }

}

Commonly used loaders

1. Template:

　　　　(1) html-loader: export and compile HTML files into strings, one of the modules recognized by js

　　　　(2) pug-loader : load pug template

　　　　(3) jade-loader : Load the jade template (the predecessor of pug, renamed pug due to trademark issues)

　　　　(4) ejs-loader : Load ejs template

　　　　(5) handlebars-loader : transfer Handlebars template to HTML

　　2. Style:

　　　　(1) css-loader : Parse the code in the css file

　　　　(2) style-loader : export the css module as a style to the DOM

　　　　(3)less-loader : Load and escape less files

　　　　(4) sass-loader : load and escape sass/scss files

　　　　(5)postcss-loader : 使用postcss加载和转义css/sss文件

　　3.脚本转换编译:

　　　　(1)script-loader : 在全局上下文中执行一次javascript文件，不需要解析

　　　　(2)babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析

　　　　(3)typescript-loader : 加载Typescript脚本文件

　　　　(4)coffee-loader : 加载Coffeescript脚本文件

　　4.JSON加载:

　　　　(1)json-loader : 加载json文件（默认包含）

　　　　(2)json5-loader : 加载和转义JSON5文件

　　5.Files文件

　　　　(1)raw-loader : 加载文件原始内容(utf-8格式)

　　　　(2)url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL

　　　　(3)file-loader : 将文件发送到输出的文件夹并返回URL(相对路径)

　　　　(4)jshint-loader : 检查代码格式错误

　　6.加载框架:

　　　　(1)vue-loader : 加载和转义vue组件

　　　　(2)angualr2-template--loader : 加载和转义angular组件

　　　　(3)react-hot-loader : 动态刷新和转义react组件中修改的部分,基于webpack-dev-server插件需先安装,然后在webpack.config.js中引用react-hot-loader

webpack执行

webpack --progress --colors

监听

webpack --progress --colors --watch

开发环境

安装webpack-dev-server

执行 webpack-dev-server --progress --colors

简化命令

package.json中

script:{

"dev"：webpack-dev-server --progress --colors --inline

}