webpack官网地址
也可参考(项目建设)
首先要有node环境以及下载cnpm。
然后开始下载webpack。
1、cnpm init (
然后name:你取得名字,然后一路回车。)
或是使用淘宝镜像
npm install -g cnpm --registry='https://registry.npm.taobao.org'
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack-simple my-project
# 安装依赖,走你
$ cd my-project
$ cnpm install
$ cnpm run dev
$ npm run build(项目建成打包)
就可以启动项目了。
webpack的基本操作
1、cnpm init
(
然后name:你取得名字,然后一路回车。
)
或是使用淘宝镜像
npm install -g cnpm --registry='https://registry.npm.taobao.org'
2、cnpm install -- sava-dev webpack@2.6.0
下载好webpack就可以创建项目了(创建项目)
3、wepack entry.js bundle.js (打包语句)
//自己创建一个entry.js文件通过webpack打包成一个模块化的bundle.js文件
当entry.js引用其他文件时通过wepack entry.js bundle.js 语句也可以载入模块bundle中。
但是引用css文件时需要下载ruby和下载css插件。
3.1首先在webpack.config.js插件配置中加入这两个配置。
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
},
]
}
3.2然后执行语句:
cnpm install --sava-dev css -loader style-loader
注释:css -loader 是来识别css文件的,
style-loader作用是文件内部生产一个style标签,能够让打包样式在浏览器上识别。
然后在执行wepack entry.js bundle.js 这句话。