先建好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 }) ] }