webpack 入门

一，初始化和安装webpack

npm init -y

npm install --save-dev webpack

二，创建 webpack.config.js文件

对webpack.config文件进行配置

module.exports = {  entry: './src/index.js',  output: {    filename: '[name].[chunkhash:8].js',    path: path.resolve(__dirname, 'dist')  },

三，使用插件自动生成html模板

注意，生成的模板放在dist文件夹下，不要随意改名字，webpack-dev-server默认取index.js

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html模板

在plugin：[]中添加以下内容

new HtmlWebpackPlugin({  title: 'webpack angular demo',  filename: 'index.html',  template: './src/index.html'}),

四，添加loaders 包括，less，file等

npm install --save-dev less less-loader css-loader style-loader

并在module:{}添加

{  test: /\.less$/,  use: [    'style-loader',    'css-loader',    'less-loader'  ]}

五，添加sourcemap

devtool: 'inline-source-map',

六：添加webpack-dev-server和open-browser-webpack-plugin插件

npm install --save-dev webpack-dev-server

并在package.json文件中添加

"dev": "webpack-dev-server "

在webpack-config.js中添加

devServer: {

contentBase:'./dist',

port:8082

},

七，安装babel

npm install --save-dev babel-core babel-preset-es2015

npm install --save-dev babel-loader

创建.babelrlc文件

{  "presets": [    "es2015"  ]}

这些webpack的配置基本满足需要了

新手入门推荐https://doc.webpack-china.org/guides/ 官网指南