webpack.config.js 配置文件参考

Webpack可以看做是模块打包机： 它做的事情是，分析你的项目结构，找到JavaScript模块(commonJs)以及其它的 一些浏览器不能直接运行的拓展语言（Scss，jsx,.vue等），并将其打包为合适的格式以供浏 览器使用。

webpack.config.js 配置文件参考

module.exports ={
 entry: {
 index:__dirname + "/src/index.js"
 },
 output: {
 path: __dirname + "/dist", //打包后的文件存放的地方
 filename: "[name].bundle.js",//打包后输出文件的文件名
 publicPath:"/dist/" //webpack output is served from
 },

 devServer: {
 contentBase: "./", //content not from webpack is serverd
 port: '8080',
 inline: true//实时刷新
 },

 devtool: 'source‐map',

 module:{
 rules:[
 {
 test: /\.css$/,
 loader: 'style‐loader!css‐loader'//添加对样式表的处理,内联样式
 //loader: 'style‐loader!css‐loader!postcss‐loader'
 },
 {
 test:/\.js$/, //随便起的test 名字
 exclude: /node_modules/, //排除一个
 // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
 loader:'babel‐loader',
 query:{
 presets:['es2015']
 }
 },

 //npm install ‐‐save‐dev sass‐loader
 //因为sass‐loader依赖于node‐sass，所以还要安装node‐sass
 // npm install ‐‐save‐dev node‐sass40 {
 test: /\.scss$/,
 loader:'style‐loader!css‐loader!sass‐loader'
 //loader:'style‐loader!css‐loader!postcss‐loader!sass‐loader'
 },
 {
 test: /\.(png|jpg|gif|svg)$/,
 loader: 'file‐loader',
 options: {
 name: 'img/[name].[ext]'
 }
 //(1)将代码中依赖的图片资源复制到目标文件夹img/文件夹下面
 //(2)自动更新静态url地址(根据publicPath)。
 }
 ]
 }
 }

module.exports = {
 plugins: [
 // require('autoprefixer')('last 100 versions' )
 require('autoprefixer')(
 { browsers:
 [
 'last 10 Chrome versions',
 'last 5 Firefox versions',
 'Safari >= 6',
 'ie> 8',
 'iOS >= 8',
 'Android >= 4.4'
 ]
 }
 )
 ]
 }