this is a study project for webpack !
- npm install --save webpack
- npm install --save webpack@
- npm install --save-dev webpack-cli
- package.json
- "scripts": { "build": "webpack --config webpack.config.js" }
- npm run build
- 不建议全局安装
- npm init -y
- npm install webpack webpack-cli --save-dev
- npm install --save lodash
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- npm install --save-dev style-loader css-loader
- npm install --save-dev file-loader
- image-webpack-loader
- url-loader
- csv-loader
- xml-loader
- npm install --save-dev html-webpack-plugin
- npm install --save-dev clean-webpack-plugin
- webpack.config.js -> devtool: 'inline-source-map'
- webpack自动编译
- webpack's Watch Mode
- package.json -> "watch": "webpack --watch"
- webpack-dev-server
- npm install --save-dev webpack-dev-server
- webpack.config.js -> devServer: { contentBase: './dist' }
- package.json -> "start": "webpack-dev-server --open"
- webpack-dev-middleware
- webpack-dev-middleware 配合 express server 的示例
- npm install --save-dev express webpack-dev-middleware
- webpack.config.js -> output -> publicPath: '/'
- package.json -> "server": "node server.js"
- server.js 如下:
- webpack's Watch Mode
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const app = express()
const config = require('./webpack.config.js')
const compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}))
app.listen(3000, function(){
console.log('xample app listening on port 3000!\n')
})