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/ 官网指南