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

你可能感兴趣的:(webpack入门)