a .
注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js
b .
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件
这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中
其实webpack打包指令除了可以通知要打包哪些文件,还可以通过配置
2.2webpack常见配置
刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了
如果想要使用其他指令,可以直接修改的 package.json 的scirpts
以后再打包的时候,就可以直接使用npm run test了;
当然,还可以看下devtool的取值,他生成的sourcemap映射表,对打包后的包的大小和打包速度有很大影响
通过 命令行工具打包: webpack app.js bundle.js打包完成后会在同目录下生成bundle.js.
app.js: 入口文件
bundle.js: 打包好的文件。
通过amd规范定义的, 打包后会生成一个bundle.js 和 一个 1.bundle.js, 两个bundle.js 文件
webpack把各个模块的css打包成一个方法:webpack.config.js配置如下
var ExtractTextPlugin = require("extract-text-webpack-plugin")//extract-text-webpack-plugin安装此插件
module:{
loaders:[
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins:[
new ExtractTextPlugin("css/[name].css")//则会生成一个css文件
]
比如你的js文件中这样引入即可:
import './css/lib/bootstrap.min.css'
import './css/test.css'