- 运行./node_modules/.bin/webpack src/index.js dist/bundle.js。这是将src/index.js打包到dist/bundle.js，也可以在package.json中给这条命令换个名字。webpack内置babel,所以可以在index.js中使用es6的语法。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack src/index.js dist/bundle.js"//写在这里 在终端运行npm run build
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
- 上面的命令有个缺点，那就是大多数项目需要更复杂的设置，为了避免在终端输入太多的命令，我们需要一个配置文件。在同级目录下新建一个webpack.config.js文件:
const path = require('path');
module.exports = {
//入口 index.js
entry: './src/index.js',
//输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- 在终端输入./node_modules/.bin/webpack --config webpack.config.js。如果不加配置文件，webpack也会自动寻找当前目录下的webpack.config.js，上面那句话可以简写成./node_modules/.bin/webpack。
- 这时候package.json。中的build也可以简化成
"build": "webpack"。为什么呢？是因为build命令会自动到当前目录下的./node_modules/.bin/目录下寻找可执行文件，webpack又会自动寻找当前目录下的webpack.config.js。 - webpack也可以将css打包。它的打包方式是读取css文件后写到style标签里，将style标签放到head标签中。只要在index.js中输入
import './path/name.css'，然后再package.json中写入一段：
const path = require('path');
module.exports = {
//入口 index.js
entry: './src/index.js',
//输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders:[
{
test: /\.css$/,
use: 'style-loader!css-loader!autoprefixer-loader'
//顺序为从右向左:给属性加前缀、读取css文件到内存、加到head标签中
}
]
}
};
上面的css加载器也可以写成以下形式
loaders:[
{
test: /\.css$/,
loaders:[
'style-loader',
'css-loader',
'autoprefixer-loader'
]
}
]
- 加载图片
img.src = require(./1.png)，然后在loaders中配置，运行可能会报错，提示需要安装file-loader，运行npm install -D file-loader。使用这种方法只要图片内容改变，webpack会将图片文件改名，可以解决缓存问题。（经测试import png from './1.png'的写法也可以引用图片，也就是说webpack消除了AMD、CMD以及ES module的区别）
loaders:[
{
test: /\.css$/,
use: 'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg|jpeg)$/,
use: 'url-loader'
}
]
- 每次改动后都要运行一次
npm run build，这样很麻烦。所以webpack提供了webpack --watch命令来自动build。同样为了统一命令，在package.json里加一条
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack src/index.js dist/bundle.js",
"watch": "webpack --watch"//在终端运行npm run watch
}
- 使用sass时如果遇到提示安装node-sass，要先在git bash里运行
export SASS_BINARY_SITE='https://npm.taobao.org/mirrors/node-sass'再安装node-sass才可能成功 - 多页打包
{
entry: {
page1: "./page1",
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
