先建好webpack.config.js文件,在里面写好一个大大的module.exports = { } ,然后配置都往大括号里填
入口:entry
entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串
entry:{ app:'./app.js', }
出口:output
指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」
output:{ path: path.resolve(__dirname, 'dist'), // 打包输出文件地址 filename:'[name].[hash:5].js', // 生成文件名称 chunkFilename: '[name].bundle.js', // 依赖文件名称 publicPath: '' // 公共路径 }
样式处理loader
接着就是配置loaders,对文件进行预处理
样式处理要使用css-loader ,style-loader,less-loader,sass-loader,
为了生成独立 .css 文件要使用插件ExtractTextWebpackPlugin
为了在css样式前加上前缀,使用未来css语法,优化css等使用postcss-loader,以及
autoprefixer,postcss-cssnext,cssnano
举例:
module:{ rules:[ test:'/\.less$/', // 里面放一个正则 用来匹配处理的文件 exclude:/node_modules/, // 不处理这个文件里的 use: ExtractTextWebpackPlugin.extract({ fallback: { // use中的失败来使用fallback中的loader loader: 'style-loader', options: { singleton: true, // 生成的style标签只有一个 transform: './css.transform.js' // 通过条件改变css,可在js中改变css } }, use:[ { loader:'css-loader', options:{ minimize: true, //启用压缩 modules: true, //启用css模块 localIdentName: '[path][name]_[local]--[hash:base64:5]' //生成的标识符 } }, { loader: 'postcss-loader', options: { ident: 'postcss', // 配置id 建议命名postcss plugins: [ require('autoprefixer')(), // 添加前缀 require('postcss-cssnext')(), // 支持新css语法 require('cssnano')() // css优化 ] } }, { loader: 'less-loader' } ] )} ] , plugins: [ new ExtractTextWebpackPlugin({ filename: '[name].min.css', allChunks: false }) ] }