webpack2.0搭建前端项目的教程详解

npm init

npm install webpack --save-dev

npm install style-loader css-loader stylus-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer

// 该配置基于webpack2.0 详情查看 https://webpack.js.org/guides/migrating/
const path = require('path'); // 导入路径包

module.exports = {
 entry: './src/main.js', //入口文件
 output: {
 path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
　　　　 // publicPath: '/assets/', // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...'
 // filename: 'bundle.js' // 指定打包为一个文件 bundle.js
 filename: '[name].js' // 可以打包为多个文件
 },
 // 使用loader模块
 module: {
 /* 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用，
　　　　　　同时链式loader(用!连接)只适用于module.loader，
　　　　　　同时-loader不可省略 */
 rules: [{
  test: /\.css$/,
  use: [
  'style-loader', {
   loader: 'css-loader',
   options: {
   // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
   }
  }, {
   loader: 'postcss-loader',
   // 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }
  ]
 }, {
  test: /\.styl(us)"postcss-loader",
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }, 'stylus-loader'
  ]
 }]
 }
}

require('./common/css/style.css'); require('./common/css/stylus.styl');

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

"scripts": {
 "start": "webpack-dev-server",
 "build": "webpack"
 }

npm install webpack-dev-server -g

// 配置devServer各种参数
 devServer: {
 contentBase: "./", // 本地服务器所加载的页面所在的目录
 historyApiFallback: true, // 不跳转
 inline: true // 实时刷新
 }

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

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ....,
 plugins: [
 new HtmlWebpackPlugin({
  template: './index.html' // 模版文件
 })
 ]
}

module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
 ....
 }
}

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

{
 presets: ['es2015']
}

{
 "presets": [
  ["es2015", {"modules": false}]
 ]
}

{
 test: /\.js$/,
 loader: 'babel-loader', //此处不能用use，不知道为啥
 exclude: /node_modules/ //需要排除的目录
}

 plugins: [
  ...
  new webpack.HotModuleReplacementPlugin() // 热加载插件
 ]

"scripts": {
 "start": "webpack-dev-server",
 "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
 }

var prod = process.env.NODE_ENV === 'production' "_blank" href="http://xiazai.jb51.net/201704/yuanma/webpack-demo-project-master(jb51.net).rar">点击这里

总结
以上就是这篇文章的全部内容了，至此大致的开发以及生产环境已经搭建完毕。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持