全局安装webpack
cnpm install webpack-cli -g
新建一个名为hello的文件夹,然后在该文件夹下新建hello.js文件
打包
webpack 要打包的文件名 -o 打包成功后输出的文件名
webpack hello.js -o hello_p.js
警告的意思是
没有设定 mode，这是 webpack 4 引入的，有俩种模式，development 与 production，默认为 production
这么写就不会有警告了
webpack hello.js -o hello_p.js --mode development
或
webpack --mode development hello.js -o hello_p.js
webpack默认打包的文件是src文件夹下的index.js,默认输出到dist文件夹下的main.js
当要打包的不是src下的index.js时，要指定入口文件的路径，不指定输出文件的路径的话则默认输出到dist文件夹下的main.js
如果打包的文件不想默认输出到dist下的main.js文件，怎么输出到指定的文件呢
正确指定方式
webpack ./src/hello.js -o ./dist/main_h.js --mode development
在hello文件夹下新建webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
再执行webpack
webpack配置
- 虽然webpack打包成功了，但是实际项目远没有这么简单。我们现在依靠的是全局的webpack打包，因此我们也不能根据项目实际的情况写配置文件。
- 因此我们在项目本地安装一下webpack和webpack-cli。首先，我们需要初始化项目一下npm init -y，生成package.json文件，来配置脚本命令（有什么作用，我就不必多说了把，注意项目名称不能有中文和大写哦），然后npm install webpack webpack-cli -D。
- 在这里再提示一下，练习的文件夹，最好不要叫做webpack，因为这样在npm init -y时生成的package.json文件name字段会有webpack，这样会导致安装不了项目本地的webpack
要在项目根目录配置一个名为 webpack.config.js,并配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')//如果不写这行则默认是dist文件夹
}
};
这里说明一下内容：这里配置了一个打包的接口信息，输出的文件源路径我们需要配置，output用来配置输出的文件，因为，webpack4是默认将打包文件输出到dist的文件下，但若要输出到别的路径下，记得使用绝对路径。filename可以指定输出的文件名。
因为我们每次打包的时候，都需要指定mode，十分麻烦，因此我们可以在package.json文件的scripts一栏，添加运行脚本，来节省不少事。
注意：package.json中不能加类似这样的注释
我们运行的是npm run start。这里的start等价于运行webpack --mode development。
