npm install --save-dev less less-loader
css
{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS , { loader: "less-loader" // compiles Less to CSS }] }
分離html
{ test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) }
sass與less相同
npm install --save-dev sass-loader node-sass
node
npm install --save-dev postcss-loader autoprefixer
react
postcss須要單獨配置configjquery
postcss.config.js 與 webpack.config.js 同級webpack
module.exports = { plugins: [ require('autoprefixer') ] }
配置loadercss3
{ test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] }
分離csses6
{ test: /\.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }
npmn i -D purifycss-webpack purify-css
PurifyCSS-webpack要以來於purify-css這個包,因此這兩個都須要安裝web
由於咱們須要同步檢查html模板,因此咱們須要引入node的glob對象使用。在webpack.config.js文件頭部引入glob。npm
const glob =
require('glob');
const PurifyCSSPlugin =
require("purifycss-webpack");
new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! paths: glob.sync(path.join(__dirname, 'src/*.html')), })
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
{ test:/\.jsx?$/, use: { loader: 'babel-loader', options: { presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react } }, include:path.join(__dirname,'./src'), exclude:/node_modules/ }
配置devtool
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }
能夠直接在entry中引入
import $ from jquery
利用插件引入
const webpack = require('webpack')
new webpack.ProvidePlugin({ $:"jquery" })
npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new CopyWebpackPlugin([{ from: path.join(__dirname, 'public'), // 從哪裏複製 to: path.join(__dirname, 'dist', 'public') // 複製到哪裏 }]) ]
npm install clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin([path.join(__dirname, 'dist')]) ]
watch: true, watchOptions: { ignored: /node_modules/, //忽略不用監聽變動的目錄 aggregateTimeout: 500, // 文件發生改變後多長時間後再從新編譯(Add a delay before rebuilding once the first file changed ) poll:1000 //每秒詢問的文件變動的次數 }
//請求到 /api/users 如今會被代理到請求 http://localhost:9000/api/users。 proxy: { "/api": "http://localhost:9000", }
指定extension以後能夠不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配
resolve: { //自動補全後綴,注意第一個必須是空字符串,後綴必定以點開頭 extensions: ["",".js",".css",".json"], },
配置別名能夠加快webpack查找模塊的速度
const bootstrap = path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css'); resolve: { alias: { 'bootstrap': bootstrap } }
// 多個入口,能夠給每一個入口添加html模板 entry: { index: './src/index.js', main:'./src/main.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js', publicPath:PUBLIC_PATH }, plugins: [ new HtmlWebpackPlugin({ minify: { removeAttributeQuotes:true }, hash: true, template: './src/index.html', chunks:['index'], filename:'index.html' }), new HtmlWebpackPlugin({ minify: { removeAttributeQuotes:true }, hash: true, chunks:['login'], template: './src/login.html', filename:'login.html' })] ]