webpack入门

全局安装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。

个人网站：www.panbingwen.cn