[英]Bundle JS files with webpack scripts?
I'm super new to webpack and I do not seem to find a way to bundle JS files as I did with Gulp in a very easy way.我是 webpack 的超级新手,我似乎没有找到一种像 Gulp 那样以非常简单的方式捆绑 JS 文件的方法。 I've been searching a bit but didn't find any straight answer to it.
我一直在搜索,但没有找到任何直接的答案。
Right now I'm creating two minified files by using in my package.json
file, but I would love to have a single one instead:现在我正在通过在我的
package.json
文件中使用创建两个缩小的文件,但我希望有一个:
"scripts": {
"stand-alone": "concurrently 'webpack --config=webpack.config.js src/whatever.vue demos/build.min.js --output-library=whatever1' 'webpack --config=webpack.config.js src/whatever2.js demos/mixin.min.js --output-library=whatever2'",
},
Then my webpack.config.js
looks like this:然后我的
webpack.config.js
看起来像这样:
const webpack = require('webpack');
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
})
],
};
I believe you are looking for entry points .我相信你正在寻找切入点。
In your webpack.config.js
module exports object:在你的
webpack.config.js
模块中导出对象:
Define the entry
property:定义
entry
属性:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
},
Define the output
property:定义
output
属性:
output: {
path: '/path/to/assets', // ex. '../../wwwroot/dist'
filename: '[name].js', // Substitutes [name] with the entry name, results in app.js
publicPath: '/'
},
Change your script to:将您的脚本更改为:
"scripts": {
"stand-alone": "webpack --config=webpack.config.js",
},
If you are using Vue + Webpack, I recommend that you take a look to vue-cli and generate a project using the webpack template.如果你使用 Vue + Webpack,我建议你看看vue-cli并使用 webpack 模板生成一个项目。 It is more advanced, but you can see the documentation and get an idea of what you are missing.
它更高级,但您可以查看文档并了解您缺少什么。
Run the following:运行以下命令:
npm install -g vue-cli // install vue cli globally
vue init webpack my-project // create a sample project
If you want to generate multiple output files, you can have more than one entry point like so:如果你想生成多个输出文件,你可以有多个入口点,如下所示:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
mixins: './path/to/mixins.js',
vendors: ['./path/to/vendor.js', './path/to/vendor2.js']
},
This will write to disk ./path/to/assets/app.js
, ./path/to/assets/mixins.js
, /path/to/assets/vendors.js
.这将写入磁盘
./path/to/assets/app.js
、 ./path/to/assets/mixins.js
、 /path/to/assets/vendors.js
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.